<!DOCTYPE html>
<html>
<head>
    <title>Capacitor Plates Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.fillStyle = 'black';
        
        // --- Plate parameters ---
        const y1 = 150; // Top y-coordinate of the front-most vertical edge
        const h = 220;  // Height of the vertical edges
        const w = 40;   // Depth of the plate in x-direction
        const s = 30;   // Vertical slant due to perspective

        // X-coordinates for the left plate
        const leftPlate_x_front = 250;
        const leftPlate_x_back = leftPlate_x_front - w;

        // Separation distance 'x' in the diagram
        const separation = 80;

        // X-coordinates for the right plate
        const rightPlate_x_back = leftPlate_x_front + separation;
        const rightPlate_x_front = rightPlate_x_back + w;


        // --- Draw Left Plate ---
        ctx.beginPath();
        ctx.moveTo(leftPlate_x_front, y1);
        ctx.lineTo(leftPlate_x_front, y1 + h);
        ctx.lineTo(leftPlate_x_back, y1 + h - s);
        ctx.lineTo(leftPlate_x_back, y1 - s);
        ctx.closePath();
        ctx.stroke();

        // --- Draw Right Plate ---
        ctx.beginPath();
        ctx.moveTo(rightPlate_x_front, y1);
        ctx.lineTo(rightPlate_x_front, y1 + h);
        ctx.lineTo(rightPlate_x_back, y1 + h - s);
        ctx.lineTo(rightPlate_x_back, y1 - s);
        ctx.closePath();
        ctx.stroke();

        // --- Draw Central Axis ---
        const y_axis = y1 + h / 2 - s / 2;
        const leftPlate_center_x = (leftPlate_x_front + leftPlate_x_back) / 2;
        const rightPlate_center_x = (rightPlate_x_front + rightPlate_x_back) / 2;

        // Left solid line
        ctx.beginPath();
        ctx.moveTo(50, y_axis);
        ctx.lineTo(leftPlate_center_x, y_axis);
        ctx.stroke();

        // Right dashed and solid line
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(rightPlate_x_back, y_axis);
        ctx.lineTo(rightPlate_center_x, y_axis);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.setLineDash([]);
        ctx.moveTo(rightPlate_center_x, y_axis);
        ctx.lineTo(550, y_axis);
        ctx.stroke();

        // --- Draw Dimension 'x' ---
        const y_dim_line = 100;
        const x_start_dim = leftPlate_x_front;
        const x_end_dim = rightPlate_x_back;

        // Dashed extension lines
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(x_start_dim, y1);
        ctx.lineTo(x_start_dim, y_dim_line);
        ctx.moveTo(x_end_dim, y1 - s);
        ctx.lineTo(x_end_dim, y_dim_line);
        ctx.stroke();

        // Arrow line
        ctx.setLineDash([]);
        
        function drawArrowLine(x1, y, x2) {
            ctx.beginPath();
            // line
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            // left arrowhead
            ctx.moveTo(x1 + 8, y - 5);
            ctx.lineTo(x1, y);
            ctx.lineTo(x1 + 8, y + 5);
            // right arrowhead
            ctx.moveTo(x2 - 8, y - 5);
            ctx.lineTo(x2, y);
            ctx.lineTo(x2 - 8, y + 5);
            ctx.stroke();
        }
        
        drawArrowLine(x_start_dim, y_dim_line, x_end_dim);

        // Text 'x'
        ctx.font = 'italic 20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('x', (x_start_dim + x_end_dim) / 2, y_dim_line - 2);


        // --- Draw Label 'metal plates' ---
        const label_x = 450;
        const label_y = 105;
        const leader_start_x = label_x - 15;
        const leader_start_y = label_y + 10;

        ctx.font = '22px Arial';
        ctx.textAlign = 'start';
        ctx.textBaseline = 'middle';
        ctx.fillText('metal plates', label_x, label_y);

        // Leader lines
        const left_plate_top_mid_x = (leftPlate_x_front + leftPlate_x_back) / 2;
        const left_plate_top_mid_y = (y1 + (y1 - s)) / 2;
        const right_plate_top_mid_x = (rightPlate_x_front + rightPlate_x_back) / 2;
        const right_plate_top_mid_y = (y1 + (y1 - s)) / 2;

        ctx.beginPath();
        ctx.moveTo(leader_start_x, leader_start_y);
        ctx.lineTo(right_plate_top_mid_x + 10, right_plate_top_mid_y);
        ctx.moveTo(leader_start_x, leader_start_y);
        ctx.lineTo(left_plate_top_mid_x, left_plate_top_mid_y);
        ctx.stroke();


        // --- Draw Caption 'Fig. 6.1' ---
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Fig. 6.1', canvas.width / 2, 450);

    </script>
</body>
</html>